<template>
  <div class="container">
    <!--工具条-->
    <el-form :inline="true" :data="usersData" :model="filters" class="demo-form-inline" style="margin-top:40px;">
      <!-- 引入查询组件 -->
      <div class="search">
        <search/>
      </div>
      <div class="newButton">
        <el-form-item>
          <el-button type="primary" size="small" @click="handleAdd"><svg-icon icon-class="add" style="cursor:pointer"/> 新增</el-button>
        </el-form-item>
      </div>
    </el-form>
    <!--列表-->
    <el-table v-loading="listLoading" ref="table" :data="usersData" stripe highlight-current-row class="table-list" style="z-index: 0" @selection-change="selsChange">
      <el-table-column type="selection"/>
      <el-table-column type="index"/>
      <el-table-column prop="customerName" label="客户名称"/>
      <el-table-column prop="type" label="客户类型"/>
      <el-table-column label="联系人">
        <template slot-scope="scope">
          <span type="warning" size="small" style="cursor:pointer;text-decoration: underline" @click="handleDetail1(scope.row)">{{ scope.row.contactName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="tel" label="联系电话"/>
      <!-- <el-table-column prop="assProject" label="关联项目"/> -->
      <el-table-column prop="createTime" label="新增时间"/>
      <el-table-column label="操作" width="270px">
        <template slot-scope="scope">
          <el-button type="success" size="small" @click="handleDetail(scope.$index, scope.row)">查看详情</el-button>
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
      <!-- 查看关联项目 -->
      <!-- <el-table-column type="expand">
        <template slot-scope="scope">
          <el-form label-position="left" class="demo-table">
            <div class="form-top">
              <el-form-item label="职务" class="form-top-username">
                <span>{{ scope.row.username }}</span>
              </el-form-item>
              <el-form-item label="学历" class="form-top-education">
                <span>{{ scope.row.education }}</span>
              </el-form-item>
              <el-form-item label="性别" class="form-top-sex">
                <span>{{ scope.row.sex }}</span>
              </el-form-item>
              <el-form-item label="年龄" class="form-top-age">
                <span>{{ scope.row.age }}</span>
              </el-form-item>
            </div>
            <div class="form-middle">
              <el-form-item label="职位" class="form-middle-position">
                <span>{{ scope.row.position }}</span>
              </el-form-item>
              <el-form-item label="生日" class="form-middle-birth">
                <span>{{ scope.row.birth }}</span>
              </el-form-item>
              <el-form-item label="入职时间" class="form-middle-entryDate">
                <span>{{ scope.row.entryDate }}</span>
              </el-form-item>
              <el-form-item label="手机号" class="form-middle-phoneNumber">
                <span>{{ scope.row.phoneNumber }}</span>
              </el-form-item>
            </div>
            <div class="form-buttom">
              <el-form-item label="邮箱" class="form-buttom-email">
                <span>{{ scope.row.email }}</span>
              </el-form-item>
              <el-form-item label="地址" class="form-buttom-address">
                <span>{{ scope.row.address }}</span>
              </el-form-item>
              <el-form-item label="权限列表" class="form-buttom-permissions">
                <span>{{ scope.row.permissions }}</span>
              </el-form-item>
              <el-form-item label="角色列表" class="form-buttom-roles">
                <span>{{ scope.row.roles }}</span>
              </el-form-item>
            </div>
          </el-form>
        </template>
      </el-table-column> -->
      <!-- 查看联系人信息 -->
      <el-dialog :visible.sync="contactVisible" :close-on-click-modal="false" :append-to-body="true" title="联系人信息">
        <ul>
          <li v-for="(item, index) in contactData" :key="index" style="display:flex">
            <p style="font-size:16px">{{ index }}: {{ item }}</p>
          </li>
        </ul>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="contactVisible = false">关闭</el-button>
        </div>
      </el-dialog>
    </el-table>
    <!--工具条-->
    <el-col ref="row" :span="24" style="background-color: aliceblue">
      <div style="margin:10px">
        <el-button :disabled="sels.length===0" type="danger" @click="batchRemove" >批量删除</el-button>
        <div class="block" style="float:right;padding:5px 0">
          <el-pagination
            :total="total"
            :current-page.sync="page"
            layout="prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
        </div>
      </div>
    </el-col>
    <!--编辑界面-->
    <!-- <el-dialog :visible.sync="editFormVisible" :close-on-click-modal="false" title="编辑">
      <el-form ref="editForm" :rules="editFormRules" :model="editForm" label-width="80px">
        <el-form-item label="姓名" prop="username">
          <el-input v-model="editForm.username" auto-complete="off"/>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="editForm.sex">
            <el-radio :label="'男'" class="radio">男</el-radio>
            <el-radio :label="'女'" class="radio">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生日" prop="birth">
          <el-date-picker v-model="editForm.birth" type="date" placeholder="选择日期"/>
        </el-form-item>
        <el-form-item label="学历">
          <el-input v-model="editForm.education" placeholder="输入学历" />
        </el-form-item>
        <el-form-item label="职位" prop="position">
          <el-input v-model="editForm.position" placeholder="输入职位" />
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNumber">
          <el-input v-model="editForm.phoneNumber" placeholder="输入手机号" />
        </el-form-item>
        <el-form-item label="电子邮件" prop="email">
          <el-input v-model="editForm.email" placeholder="输入电子邮件" />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="editForm.address" type="textarea"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="editLoading" type="primary" @click.native="editSubmit">提交</el-button>
        <el-button @click.native="editFormVisible = false">取消</el-button>
      </div>
    </el-dialog> -->
    <!--新增界面-->
    <el-dialog :visible.sync="addFormVisible" :close-on-click-modal="false" title="新增" style="z-index:9999">
      <el-form ref="addForm" :rules="addFormRules" :model="addForm" label-width="180px">
        <div class="addForm_left">
          <el-form-item label="客户名称" prop="name">
            <el-input v-model="addForm.name" placeholder="请输入客户名称" auto-complete="off"/>
          </el-form-item>
          <el-form-item label="客户类型" prop="typeId">
            <el-select v-model="addForm.typeId" placeholder="选择搜索名" style="width: 150px" @focus="option">
              <el-option
                v-for="item in logoData"
                :key="item.name"
                :value="item.id"
                :label="item.name"/>
            </el-select>
          </el-form-item>
        </div>
        <el-form ref="organizationInfo" :model="addForm.organization" label-width="180px">
          <div class="addForm_left">
            <el-form-item label="企业名称/政府机构" prop="name">
              <el-input v-model="addForm.organization.name" placeholder="请输入客户名称" auto-complete="off"/>
            </el-form-item>
            <el-form-item label="负责人" prop="principal">
              <el-input v-model="addForm.organization.principal" placeholder="请输入客户名称" auto-complete="off"/>
            </el-form-item>
          </div>
          <div class="addForm_left">
            <el-form-item label="负责人身份证号" prop="idCard">
              <el-input v-model="addForm.organization.idCard" placeholder="请输入客户名称" auto-complete="off"/>
            </el-form-item>
            <el-form-item label="网址" prop="link">
              <el-input v-model="addForm.organization.link" placeholder="请输入客户名称" auto-complete="off"/>
            </el-form-item>
          </div>
          <div class="addForm_left">
            <el-form-item label="组织固定电话" prop="tel">
              <el-input v-model="addForm.organization.tel" placeholder="请输入客户名称" auto-complete="off"/>
            </el-form-item>
            <el-form-item label="组织规模" prop="scale">
              <el-input v-model="addForm.organization.scale" placeholder="请输入客户名称" auto-complete="off"/>
            </el-form-item>
          </div>
          <el-form-item label="地址" prop="address" style="width: 90%">
            <el-input v-model="addForm.organization.address" placeholder="请输入客户名称" auto-complete="off"/>
          </el-form-item>
          <!-- <el-form ref="photo" :model="addForm.organizationInfo.photo" label-width="180px">
            <el-card :body-style="{ padding: '0px' }">
              <div class="setting-image">
                <el-upload
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess1"
                  :before-upload="beforeAvatarUpload"
                  :headers="headers"
                  action="http://youjp.tes:8080/crm/upload"
                  class="avatar-uploader images">
                  <img v-if="businessPhoto" :src="businessPhoto" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"/>
                </el-upload>
                <el-upload
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess2"
                  :before-upload="beforeAvatarUpload"
                  :headers="headers"
                  action="http://youjp.tes:8080/crm/upload"
                  class="avatar-uploader images">
                  <img v-if="photoTop" :src="photoTop" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"/>
                </el-upload>
                <el-upload
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess3"
                  :before-upload="beforeAvatarUpload"
                  :headers="headers"
                  action="http://youjp.tes:8080/crm/upload"
                  class="avatar-uploader images">
                  <img v-if="photoBottom" :src="photoBottom" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"/>
                </el-upload>
              </div>
            </el-card>
          </el-form> -->
          <el-form ref="bank" :model="addForm.organization.bank" label-width="180px">
            <div class="addForm_left">
              <el-form-item label="开户银行" prop="name">
                <el-input v-model="addForm.organization.bank.name" placeholder="请输入客户名称" auto-complete="off"/>
              </el-form-item>
              <el-form-item label="银行账号" prop="account">
                <el-input v-model="addForm.organization.bank.account" placeholder="请输入客户名称" auto-complete="off"/>
              </el-form-item>
            </div>
            <el-form-item label="税号" prop="taxNumber" style="width: 45%">
              <el-input v-model="addForm.organization.bank.taxNumber" placeholder="请输入客户名称" auto-complete="off"/>
            </el-form-item>
          </el-form>
          <el-form ref="businessInfo" :model="addForm.organization.licence" label-width="180px">
            <div class="addForm_left">
              <el-form-item label="法人姓名" prop="name">
                <el-input v-model="addForm.organization.licence.name" placeholder="请输入客户名称" auto-complete="off"/>
              </el-form-item>
              <el-form-item label="统一信用代码" prop="creditCode">
                <el-input v-model="addForm.organization.licence.creditCode" placeholder="请输入客户名称" auto-complete="off"/>
              </el-form-item>
            </div>
            <div class="addForm_left">
              <el-form-item label="公司类型" prop="type">
                <el-input v-model="addForm.organization.licence.type" placeholder="请输入客户名称" auto-complete="off"/>
              </el-form-item>
              <el-form-item label="公司地址" prop="address">
                <el-input v-model="addForm.organization.licence.address" placeholder="请输入客户名称" auto-complete="off"/>
              </el-form-item>
            </div>
            <div class="addForm_left">
              <el-form-item label="注册资本" prop="registeredCapital">
                <el-input v-model="addForm.organization.licence.registeredCapital" placeholder="请输入客户名称" auto-complete="off"/>
              </el-form-item>
              <el-form-item label="成立日期" prop="buildTime">
                <el-date-picker v-model="addForm.organization.licence.buildTime" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"/>
              </el-form-item>
            </div>
            <div class="addForm_left">
              <el-form-item label="营业期限" prop="term">
                <el-input v-model="addForm.organization.licence.term" placeholder="请输入客户名称" auto-complete="off"/>
              </el-form-item>
              <el-form-item label="经营范围" prop="scopeBusiness">
                <el-input v-model="addForm.organization.licence.scopeBusiness" placeholder="请输入客户名称" auto-complete="off"/>
              </el-form-item>
            </div>
          </el-form>
          <el-form ref="contactInfo" :model="addForm.contact" label-width="180px">
            <div class="addForm_left">
              <el-form-item label="职位" prop="positionTypeId">
                <el-select v-model="addForm.contact.positionTypeId" placeholder="选择搜索名" style="width: 150px" @focus="option1">
                  <el-option
                    v-for="item in positionData"
                    :key="item.name"
                    :value="item.id"
                    :label="item.name"/>
                </el-select>
              </el-form-item>
              <el-form-item label="联系人姓名" prop="name">
                <el-input v-model="addForm.contact.name" placeholder="请输入客户名称" auto-complete="off"/>
              </el-form-item>
            </div>
            <div class="addForm_left">
              <el-form-item label="联系电话" prop="tel">
                <el-input v-model="addForm.contact.tel" placeholder="请输入客户名称" auto-complete="off"/>
              </el-form-item>
              <el-form-item label="微信号" prop="weChat">
                <el-input v-model="addForm.contact.weChat" placeholder="请输入客户名称" auto-complete="off"/>
              </el-form-item>
            </div>
            <div class="addForm_left">
              <el-form-item label="QQ号" prop="qq">
                <el-input v-model="addForm.contact.qq" placeholder="请输入客户名称" auto-complete="off"/>
              </el-form-item>
              <el-form-item label="电子邮箱" prop="email">
                <el-input v-model="addForm.contact.email" placeholder="选择日期"/>
              </el-form-item>
            </div>
          </el-form>
        </el-form>
        <el-form-item label="客户简介" prop="memo">
          <el-input :rows="4" v-model="addForm.memo" type="textarea" placeholder="请输入客户简介" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="addLoading" type="primary" @click.native="addSubmit">保存</el-button>
        <el-button @click.native="addFormVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { mapGetters } from 'vuex'
import util from '@/common/js/util'
import { getListPage, getClientsListPage, removeClient, batchRemoveClients, editClient, addClient, getOption, getOption1, getContact } from '@/api/clients'
import { isvalidatePhoneNumber, isvalidateEmail } from '@/utils/validate'
import BackTo from '@/components/Backto'
import Search from '@/components/Search'
export default {
  name: 'ListClient',
  components: {
    BackTo,
    Search
  },
  data() {
    // 手机号
    const validatePhoneNumber = (rule, value, callback) => {
      if (!isvalidatePhoneNumber(value)) {
        callback(new Error('手机号总共要十一位且第一位必须以1开头，且第二位是3、4、5、7、8中的任意一个'))
      } else if (value === '') {
        callback(new Error('请输入你的手机号'))
      } else {
        callback()
      }
    }
    // 电子邮箱
    const validateEmail = (rule, value, callback) => {
      if (!isvalidateEmail(value)) {
        callback(new Error('邮箱域名只能是以163.com、qq.com、42du.cn结尾'))
      } else if (value === '') {
        callback(new Error('请输入你的电子邮箱'))
      } else {
        callback()
      }
    }
    return {
      logoData: [],
      positionData: [],
      myBackToTopStyle: {
        right: '50px',
        bottom: '50px',
        width: '40px',
        height: '40px',
        'border-radius': '4px',
        'line-height': '45px',
        background: '#e7eaf1'
      },
      filters: {
        username: ''
      },
      total: 1,
      page: 1,
      count: 10,
      usersData: [], // 所有用户信息
      sels: [], // 列表选中列
      contactData: {},
      value: '',

      editFormVisible: false, // 编辑界面是否显示
      addFormVisible: false, // 新增界面是否显示
      contactVisible: false, // 联系人信息是否显示
      listLoading: false,
      addLoading: false,
      editLoading: false,
      editFormRules: {
        username: [{ required: true, message: '请输入你要新增的用户名', trigger: 'blur' }],
        birth: [{ type: 'date', required: true, message: '请选择你的出生日期', trigger: 'change' }],
        entryDate: [{ type: 'date', required: true, message: '请选择你的入职时间', trigger: 'change' }],
        sex: [{ required: true, message: '请选择你的性别', trigger: 'change' }],
        position: [{ required: true, message: '请输入你要修改的职位', trigger: 'blur' }],
        phoneNumber: [{ required: true, trigger: 'blur', validator: validatePhoneNumber }],
        email: [{ required: true, trigger: 'blur', validator: validateEmail }],
        address: [{ required: true, message: '请输入你要修改的地址', trigger: 'blur' }]
      },
      addFormRules: {
        phoneNumber: [{ required: true, trigger: 'blur', validator: validatePhoneNumber }],
        email: [{ required: true, trigger: 'blur', validator: validateEmail }]
      },
      // 编辑界面数据
      editForm: {
        clientName: '',
        clientType: [{
          value: 'personal',
          label: '个人'
        }, {
          value: 'company',
          label: '企业'
        }, {
          value: 'government',
          label: '政府'
        }],
        organizationInfo: {
          companyName: '',
          principal: '',
          personCharge: '',
          address: '',
          url: '',
          organizationSize: '',
          businessInfo: {
            legalName: '',
            unifiedCode: '',
            companyType: '',
            companyAddree: '',
            regisCapital: '',
            estabDate: '',
            operatingPeriod: '',
            businessScope: ''
          },
          bank: {
            bankAcc: '',
            bankAccount: '',
            taxNumber: ''
          },
          organizationPhone: '',
          photo: {
            businessPhoto: null,
            photoTop: null,
            photoBottom: null
          }
        },
        contactInfo: {
          position: [{
            value: 'legalPerson',
            label: '法人'
          }, {
            value: 'manager',
            label: '经理'
          }, {
            value: 'director',
            label: '局长'
          }],
          username: '',
          phoneNumber: '',
          weChat: '',
          qq: '',
          email: '',
          primaryId: '',
          groupContacts: ''
        },
        customerProfile: ''
      },
      // 新增界面数据
      addForm: {
        name: '',
        typeId: null,
        organization: {
          name: '',
          principal: '',
          idCard: '',
          address: '',
          link: '',
          scale: '',
          licence: {
            name: '',
            creditCode: '',
            type: '',
            address: '',
            registeredCapital: '',
            buildTime: null,
            term: '',
            scopeBusiness: ''
          },
          bank: {
            name: '',
            account: '',
            taxNumber: ''
          },
          tel: ''
          // photo: {
          //   businessPhoto: null,
          //   photoTop: null,
          //   photoBottom: null
          // }
        },
        contact: {
          positionTypeId: null,
          name: '',
          tel: '',
          weChat: '',
          qq: '',
          email: ''
          // primaryId: '',
          // groupContacts: ''
        },
        memo: ''
      }
    }
  },
  watch: {
    editForm() {
      if (typeof this.editForm.birth === 'string') {
        this.editForm.birth = new Date(this.editForm.birth)
      }
    }
  },
  mounted() {
    this.getClients()
  },
  methods: {
    option() {
      getOption().then((res) => {
        this.logoData = res.data
      })
    },
    option1() {
      getOption1().then((res) => {
        this.positionData = res.data
      })
    },
    handleSizeChange(val) {
      console.log(`${val} items per page`)
    },
    // 获得当前页并且显示当前页的用户信息
    handleCurrentChange(val) {
      this.page = val
      const myPage = this.filters.username
      if (myPage !== null && myPage.length !== 0) {
        this.submitForm()
      } else {
        this.getClients()
      }
    },
    selsChange: function(sels) {
      this.sels = sels
    },
    // 获得所有客户列表
    getClients() {
      const para = {
        page: this.page,
        count: 10
      }
      this.listLoading = true
      getClientsListPage(para).then((res) => {
        this.total = res.data.sums
        this.usersData = res.data.result
        this.listLoading = false
      })
    },
    // 显示新增界面
    handleAdd: function() {
      this.addFormVisible = true
      this.addForm = {
        name: '',
        typeId: null,
        organization: {
          name: '',
          principal: '',
          idCard: '',
          address: '',
          link: '',
          scale: '',
          licence: {
            name: '',
            creditCode: '',
            type: '',
            address: '',
            registeredCapital: '',
            buildTime: null,
            term: '',
            scopeBusiness: ''
          },
          bank: {
            name: '',
            account: '',
            taxNumber: ''
          },
          tel: ''
          // photo: {
          //   businessPhoto: null,
          //   photoTop: null,
          //   photoBottom: null
          // }
        },
        contact: {
          positionTypeId: null,
          name: '',
          tel: '',
          weChat: '',
          qq: '',
          email: ''
          // primaryId: '',
          // groupContacts: ''
        },
        memo: ''
      }
    },
    // 显示编辑界面
    handleEdit: function(index, row) {
      this.editFormVisible = true
      this.editForm = Object.assign({}, row)
    },
    // 查看联系人详情
    handleDetail1(row) {
      const para = {
        id: row.contactId
      }
      getContact(para).then((res) => {
        this.contactVisible = true
        this.contactData = {
          '客户名称': res.data.name,
          'qq号': res.data.qq,
          '电子邮箱': res.data.email,
          '微信号': res.data.wechat,
          '联系电话': res.data.tel,
          '创建时间': res.data.createTime,
          '更新时间': res.data.updateTime
        }
      })
    },
    // 查看单个客户详情
    handleDetail(index, row) {
      const para = {
        id: row.customerId
      }
      // 获取对应客户id跳转页面
      this.$router.push({
        path: '/client/list/contactId',
        query: {
          id: para.id
        }
      })
    },
    // 查看客户关联项目
    handleConnectionItem(index, row) {
      // const $table = this.$refs.table
      // $table.toggleRowExpansion(row)
      // $table.toggleRowSelection(row)
    },
    // 搜索客户
    submitForm() {
      const para = {
        page: this.page,
        username: this.filters.username
      }
      this.listLoading = true
      getListPage(para).then((res) => {
        this.total = parseInt(res.message)
        this.usersData = res.data
        this.listLoading = false
      })
    },
    // 删除
    handleDel: function(index, row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        const para = [row.customerId]
        console.log(para)
        removeClient(para).then((res) => {
          this.listLoading = false
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getClients()
        })
      }).catch(() => {

      })
    },
    // 批量删除
    batchRemove: function() {
      var ids = this.sels.map(item => item.customerId)
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        batchRemoveClients(ids).then((res) => {
          this.listLoading = false
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getClients()
        })
      }).catch(() => {

      })
    },
    // 保存编辑
    editSubmit: function() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.editLoading = true
            const para = Object.assign({}, this.editForm)
            para.birth = (!para.birth || para.birth === '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd')
            editClient(para).then((res) => {
              this.editLoading = false
              this.$message({
                message: '提交成功',
                type: 'success'
              })
              this.$refs['editForm'].resetFields()
              this.editFormVisible = false
              this.getClients()
            })
          })
        }
      })
    },
    // 保存新增
    addSubmit: function() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.addLoading = true
            const para = Object.assign({}, this.addForm)
            // para.buildTime = (!para.buildTime || para.buildTime === '') ? '' : util.formatDate.format(new Date(para.buildTime), 'yyyy-MM-dd')
            addClient(para).then((res) => {
              this.addLoading = false
              this.$message({
                message: '提交成功',
                type: 'success'
              })
              this.$refs['addForm'].resetFields()
              this.addFormVisible = false
              this.getClients()
            })
          })
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
$dark_gray:#889aa4;
  .container{
    width: 94%;
    margin-left: 3%;
    height: 100%;
  }
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 1px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
  .svg-icon{
    fill: black
  }
  .el-loading-mask{
    z-index: 1000;
  }
  .table-list{
    width: 100%;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .demo-table {
    .el-form-item {
      margin: 0 auto;
      display: inline-flex
    }
  }
  .form-top, .form-buttom, .form-middle {
    width: 100%;
  }
  .form-top-username, .form-top-sex, .form-top-age, .form-top-education {
    width: 24.32%
  }
  .form-buttom-permissions, .form-buttom-email, .form-buttom-address, .form-buttom-roles {
    width: 24.32%
  }
  .form-middle-position, .form-middle-birth, .form-middle-entryDate, .form-middle-phoneNumber {
    width: 24.32%
  }
  .search {
    background-color: white;
    width: 100%;
    height: 100%;
    padding: 20px 20px 0 20px;
    margin-bottom: 30px
  }
  .newButton {
    background-color: white;
    width: 100%;
    height: 100%;
    padding: 20px 20px 0 20px;
    .el-form-item {
      margin-bottom: 0px
    }
  }
  .addForm_left {
    width: 100%;
    display: flex;
    .el-form-item {
      width: 45%;
      // float: left;
    }
  }
  .addForm_right {
    width: 100%;
    .el-form-item {
      width: 45%;
      // float: left;
    }
  }
  ul li {
    list-style: none;
  }
</style>

<style lang="scss">
  .container{
    width: 94%;
    margin-left: 3%;
    height: 100%;
    .el-dialog__wrapper {
      .el-dialog {
        width: 60%;
      }
    }
  }
  .el-dialog__wrapper {
    .el-dialog {
      width: 60%;
      .el-dialog__body {
        padding: 20px
      }
    }
  }
</style>

